<template>
<ed-field-list
  :fields="fields"
  :value="rows"
  @change="change"
/>
</template>

<script>
import EdFieldList from './EdFieldList'
export default {
  data () {
    const field = this.field
    return {
      fields: [
        {
          tag: 'el-input',
          name: 'name',
          label: '键'
        },
        {
          ...field,
          name: 'value',
          label: '值'
        }
      ],
      rows: []
    }
  },
  props: {
    // eslint-disable-next-line vue/require-prop-types
    value: {
      default: () => ({})
    },
    field: {
      type: Object,
      default: () => {
        return {
          tag: 'el-input',
          name: 'value',
          label: '值'
        }
      }
    }
  },
  watch: {
    value () {
      let r = []
      const v = this.value || {}
      // console.log(v)
      Object.keys(v).forEach((key) => {
        r.push({
          name: key,
          value: v[key]
        })
      })
      this.row = r
    }
  },
  components: {
    EdFieldList
  },
  methods: {
    change (values) {
      this.row = values
      let o = {}
      values.forEach((value) => {
        if (!values.name) return
        o[value.name] = value.value
      })
      this.$emit('change', o)
    }
  }
}
</script>

<style scoped>

</style>
